<template>
	<div class="personnelList">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/dataExpress' }"><i class="lh fw_300 lh-seller"></i></el-breadcrumb-item>
			<el-breadcrumb-item>B端-商户</el-breadcrumb-item>
			<el-breadcrumb-item>商机客户</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="content_Box box-shadow mt_15">
			<div class="py_5 px_10">
				<el-row>
					<el-col :span="4">
						<el-button type="success" class="fl" @click="goToAdd()" round size="mini">新增</el-button>
						<el-button type="default" @click="downloadOrder()" round size="mini">导出</el-button>
					</el-col>
					<el-col :span="20">
						<el-form :inline="true" :model="ruleForm" class="form-inline fr" @keyup.enter.native="shearchBtn()">
							<el-form-item class="w_130">
								<el-autocomplete
									class="inline-input"
									v-model="shop_name"
									:fetch-suggestions="querySearch"
									placeholder="店铺名称"
									:trigger-on-focus="true"
									@select="handleSelect"
								></el-autocomplete>
							</el-form-item>
							<lh-agent-list @sendValue="setValue" :reset="agent_reset"></lh-agent-list>
							<el-form-item>
								<el-select class="w_110" v-model="city_id" placeholder="请选择城市" clearable @change="changeCity">
									<el-option v-for="item in cityList" :key="item.id" :label="item.name" :value="item.id"></el-option>
								</el-select>
							</el-form-item>

							<el-form-item class="w_110">
								<el-autocomplete
									class="inline-input"
									v-model="area_name"
									:fetch-suggestions="querySearch4"
									placeholder="商圈"
									:trigger-on-focus="true"
									@select="handleSelect4"
								></el-autocomplete>
							</el-form-item>

							<el-form-item class="w_90">
								<el-select v-model="opportunity_status" placeholder="商机状态">
									<el-option label="商机状态" value=""></el-option>
									<el-option label="待跟进" value="1"></el-option>
									<el-option label="有意向" value="2"></el-option>
									<el-option label="无意向" value="3"></el-option>
									<el-option label="无效商机" value="4"></el-option>
								</el-select>
							</el-form-item>

							<el-form-item class="w_130">
								<el-autocomplete
									class="inline-input"
									v-model="business_director"
									:fetch-suggestions="querySearch5"
									placeholder="销售"
									:trigger-on-focus="true"
									@select="handleSelect5"
								></el-autocomplete>
							</el-form-item>

							<el-form-item prop="date1" class="w_120">
								<el-date-picker
									type="date"
									value-format="yyyy-MM-dd"
									placeholder="创建开始时间"
									v-model="ruleForm.date1"
									style="width: 100%;"
								></el-date-picker> </el-form-item
							>~
							<el-form-item prop="date2" class="w_120">
								<el-date-picker
									type="date"
									value-format="yyyy-MM-dd"
									placeholder="创建结束时间"
									v-model="ruleForm.date2"
									style="width: 100%;"
								></el-date-picker>
							</el-form-item>
							<el-button size="mini" type="primary" native-type="button" class="round-right" @click="shearchBtn"
								>搜索</el-button
							>
							<el-button size="mini" round @click="resetBtn">重置</el-button>
						</el-form>
					</el-col>
				</el-row>
			</div>
			<div class="tableMaxBox">
				<template>
					<el-table :data="shopList" stripe>
						<el-table-column prop="id" type="index" label="序号" width="80px" align="center"></el-table-column>
						<el-table-column prop="name" label="店铺名称" width="210px">
							<template slot-scope="{ row }">
								<span class="pointer u text-primary" @click="goToTag(row)">{{ row.name }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="contact" label="联系人" width="120px">
							<template slot-scope="{ row }">
								<span>{{ row.contact }}</span>
							</template>
						</el-table-column>
						<!-- <el-table-column prop="shop_phone" label="联系方式" width="120px">
							<template slot-scope="{ row }">
								<span>{{ row.shop_phone }}</span>
							</template>
						</el-table-column> -->
						<el-table-column prop="contact_phone" label="联系方式" width="120px">
							<template slot-scope="{ row }">
								<span>{{ row.contact_phone }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="agent_name" label="代理商" width="110"></el-table-column>
						<el-table-column label="城市" align="center" width="80px">
							<template slot-scope="{ row }">
								<span>{{ row.city_name }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="area_name" label="商圈" width="100"></el-table-column>
						<el-table-column prop="address" label="地址" width="140px"></el-table-column>
						<el-table-column prop="origin_customer" label="客户来源" width="140px" align="center">
							<template slot-scope="{ row }">
								<span v-if="row.origin_customer == '1'">其他</span>
								<span v-if="row.origin_customer == '2'">商户</span>
								<span v-if="row.origin_customer == '3'">BD</span>
								<span v-if="row.origin_customer == '4'">高德地图</span>
								<span v-if="row.origin_customer == '5'">美团点评</span>
								<span v-if="row.origin_customer == '6'">口碑</span>
							</template>
						</el-table-column>
						<el-table-column label="来源" width="80" align="center">
							<template slot-scope="{ row }">
								<span v-if="row.origin == '1'">管理后台</span>
								<span v-if="row.origin == '2'">B端小程序</span>
								<span v-if="row.origin == '3'">灵活助手</span>
								<span v-if="row.origin == '4'">数据导入</span>
							</template>
						</el-table-column>
						<el-table-column label="商机状态" width="90" align="center">
							<template slot-scope="{ row }">
								<span class="text-primary" v-if="row.opportunity_status == '1'">待跟进</span>
								<span class="text-warning" v-if="row.opportunity_status == '2'">有意向</span>
								<span class="text-success" v-if="row.opportunity_status == '3'">无意向</span>
								<span class="text-danger" v-if="row.opportunity_status == '4'">无效商机</span>
							</template>
						</el-table-column>
						<el-table-column prop="business_director" label="销售" align="center"></el-table-column>
						<el-table-column prop="visit_count" label="拜访次数" align="center"></el-table-column>
						<el-table-column prop="visit_remark" label="最后拜访内容" width="140px" align="center"></el-table-column>
						<el-table-column prop="visitcontact" label="最后拜访人" align="center"></el-table-column>
						<el-table-column prop="visit_add_time" label="最后拜访时间" width="150px" align="center"></el-table-column>
						<el-table-column prop="creater_name" label="创建人" align="center"></el-table-column>
						<el-table-column prop="add_time" label="创建时间" width="150px" align="center"></el-table-column>

						<el-table-column label="操作" width="180px" fixed="right">
							<template slot-scope="{ row }">
								<el-link type="info" class="InfoFont text-success" :underline="false" @click="goToEdit(row)"
									>编辑</el-link
								>
								<el-link type="info" class="InfoFont text-success" :underline="false" @click="cooperation(row)"
									>确认合作</el-link
								>
								<el-link type="info" class="InfoFont text-success" :underline="false" @click="goVisitList(row)"
									>拜访记录</el-link
								>
							</template>
						</el-table-column>
					</el-table>
					<!-- 分页组件 -->
					<page :total="total" :disableMountedFetch="true" :pageNums="pageNum" @pagedata="onChildValue"></page>
				</template>
			</div>
		</div>
		<!-- 确认合作-弹框 -->
		<el-dialog title="确认合作" :visible.sync="StateShowStop" width="560px" :close-on-click-modal="false">
			<div class="auditCentent">
				<span>该客户确认要合作吗？</span>
			</div>
			<div slot="footer" class="dialog-footer">
				<span class="btnOK mr_20" @click="addMenuBtn()">确 定</span>
				<span class="resetBtn" @click="hiddenRY">取 消</span>
			</div>
		</el-dialog>

		<!-- 是否该店铺创建账号-弹框 -->
		<el-dialog title="店铺创建账号" :visible.sync="createStopFlag" width="560px" :close-on-click-modal="false">
			<div class="auditCentent">
				<span>是否为该店铺创建账号？</span>
			</div>
			<div slot="footer" class="dialog-footer">
				<span class="btnOK mr_20" @click="goCreateShop">创 建</span>
				<span class="resetBtn" @click="hideCreateShop">取 消</span>
			</div>
		</el-dialog>
	</div>
</template>

<script>
var common = require('../../../static/tool.js')
import { fetchAreaList, fetchShopList } from '@/api/shop.js'
import { fetchCityList } from '@/api/city.js'
export default {
	name: 'Opportunity',
	data() {
		return {
			windowSizeHeight: document.documentElement.clientHeight, //浏览器可视化窗口的大小
			screenHeight: document.documentElement.clientHeight,
			manageInfo: JSON.parse(sessionStorage.getItem('manageInfo')), //登录信息
			url: common.url,
			head_url: common.head_url,
			// cooperation_id: '',
			cooperationData: {}, //转合作保存当前行
			//搜索对应值
			shop_id: '', //店铺id
			shop_sn: '', //店铺sn
			shop_name: '', //店铺名
			business_director: '', //销售
			area_id: '', //商圈ID
			area_name: '', //商圈name
			opportunity_status: '', //商机状态
			sign_status: '10', //店铺状态为 已注册
			ruleForm: {
				date1: '', //开始时间
				date2: '' //结束时间
			},
			StateShowStop: false,
			cityList: [], // 城市列表
			city_id: '',

			shopList: [], //店铺列表
			shopList2: [], //搜索栏目的店铺列表
			BusinessUserList: [], //销售列表
			//向分页组件传值
			total: 0,
			pageNum: 1,
			pageSizeNow: 20,
			// 审核状态
			tag: '30',
			text: '',
			merchantsList: [], //商户列表
			agent_id: '',
			agent_reset: 0,
			// 是否创建店铺弹层
			createStopFlag: false
		}
	},
	created() {},
	mounted() {
		this.getBusinessUser()
	},
	methods: {
		// 获取店铺列表
		async fetchShopList() {
			try {
				let ret = await fetchShopList({
					sign_status: 10,
					status: 1,
					city_id: this.city_id,
					agent_id: this.agent_id
				})

				this.shop_id = ''
				this.shop_name = ''
				this.shop_sn = ''
				this.shopList2 = ret.list.map(item => {
					return {
						...item,
						value: item.name
					}
				})
			} catch (err) {
				console.log('err:', err)
			}
		},
		// 获取商圈列表
		async listArea() {
			try {
				let ret = await fetchAreaList({
					city_id: this.city_id,
					agent_id: this.agent_id
				})

				this.area_id = ''
				this.area_name = ''
				if (ret.list) {
					ret.list.forEach(item => {
						item.value = item.area_name
					})
					this.areaList = ret.list
				} else {
					this.areaList = []
				}
				this.area_arr = ''
			} catch (err) {
				console.log('error:', err)
			}
		},
		// 监听城市val变化
		async changeCity(id) {
			console.log(id)

			if (!id) {
				this.area_id = ''
				this.area_name = ''
				this.areaList = []

				this.shop_id = ''
				this.shop_name = ''
				this.shop_sn = ''
				this.shopList2 = []
			} else {
				const city = this.cityList.find(x => +x.id === +id)
				this.city_id = id
				this.city_sn = city.sn
				await this.listArea()
				await this.listShop()
				await this.fetchShopList()
			}
		},
		async listShop() {
			//获取商铺列表
			let fn = new FormData()
			fn.append('city_id', this.city_id)
			fn.append('pageSize', this.pageSizeNow) //每页多少条
			fn.append('page', this.pageNum) //页数
			fn.append('name', this.shop_name)
			if (this.area_name == '') {
				this.area_id = ''
			}
			if (this.shop_name == '') {
				this.shop_sn = ''
			}
			fn.append('shop_sn', this.shop_sn)
			fn.append('area_id', this.area_id)
			fn.append('opportunity_status', this.opportunity_status)
			fn.append('sign_status', this.sign_status)
			fn.append('business_director', this.business_director) //销售
			var ruleForm_date1 = ''
			var ruleForm_date2 = ''
			if (this.ruleForm.date1 == null) {
				this.ruleForm.date1 = ''
			}
			if (this.ruleForm.date2 == null) {
				this.ruleForm.date2 = ''
			}
			if (this.ruleForm.date1 != '' && this.ruleForm.date2 != '') {
				//开始时间与结束时间必须同时存在
				ruleForm_date1 = this.ruleForm.date1
				ruleForm_date2 = this.ruleForm.date2
			}
			fn.append('add_time_start', ruleForm_date1)
			fn.append('add_time_end', ruleForm_date2)
			fn.append('agent_id', this.agent_id)

			this.$http.post(this.url + '/shop/list', fn).then(
				res => {
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						if (res.data.data != null) {
							res.data.data.list.forEach(item => {
								item.value = item.name
							})
							this.shopList = res.data.data.list
							this.total = res.data.data.count
						} else {
							this.shopList = []
							this.total = 0
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		//获取销售列表
		getBusinessUser() {
			let fn = new FormData()
			this.$http.post(this.url + '/manageUser/getBusinessUser', fn).then(
				res => {
					if (res.data.msg == '查询成功!' || res.data.code == '200') {
						if (res.data.data != null) {
							res.data.data.forEach(item => {
								item.value = item.nickname
							})
							this.BusinessUserList = res.data.data
						} else {
							this.BusinessUserList = []
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},

		shearchBtn() {
			// 搜索
			this.pageNum = 1
			this.listShop()
		},

		async resetBtn() {
			await this.resetData() //重置请求数据
			this.agent_reset += 1
			this.pageNum = 1
		},

		async resetData() {
			//重置请求数据
			this.pageNum = 1
			this.shop_id = ''
			this.shop_name = ''
			// this.area_id = ''
			// this.area_name = ''
			this.type = ''
			this.is_order = ''
			this.business_director = ''
			this.ruleForm.date1 = ''
			this.ruleForm.date2 = ''
			this.opportunity_status = ''
		},

		goToTag(row) {
			//跳转店铺详情
			const { href } = this.$router.resolve({ path: '/shopTag', query: { id: row.id } })
			window.open(href, '_blank')
		},

		// 确认合作
		cooperation(row) {
			// this.cooperation_id = row.shop_sn
			this.cooperationData = row
			this.StateShowStop = true
		},

		//跳转拜访记录
		goVisitList(row) {
			const { href } = this.$router.resolve({
				path: '/visitList',
				query: { shop_name: row.name, shop_id: row.id, shop_sn: row.shop_sn }
			})
			window.open(href, '_blank')
		},

		goToAdd() {
			this.$router.push({
				path: '/opportunityAdd'
			})
		},

		goToEdit(row) {
			this.$router.push({
				path: '/opportunityAdd',
				query: { shop_id: row.id }
			})
		},

		//店铺的自动完成
		querySearch(queryString, cb) {
			var restaurants = this.shopList2
			var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
			// 调用 callback 返回建议列表的数据
			cb(results)
		},
		createFilter(queryString) {
			return restaurant => {
				return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
			}
		},
		handleSelect(item) {
			console.log(item)
			this.shop_id = item.id
			this.shop_sn = item.shop_sn
		},
		//商圈的自动完成
		querySearch4(queryString, cb) {
			var restaurants = this.areaList
			var results = queryString ? restaurants.filter(this.createFilter4(queryString)) : restaurants
			// 调用 callback 返回建议列表的数据
			cb(results)
		},
		createFilter4(queryString) {
			return restaurant => {
				return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
			}
		},
		handleSelect4(item) {
			console.log(item)
			this.area_id = item.id
		},
		//店铺-销售
		querySearch5(queryString, cb) {
			var restaurants = this.BusinessUserList
			var results = queryString ? restaurants.filter(this.createFilter5(queryString)) : restaurants
			// 调用 callback 返回建议列表的数据
			cb(results)
		},
		createFilter5(queryString) {
			return restaurant => {
				return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
			}
		},
		handleSelect5(item) {
			this.business_director = item.nickname
		},
		//隐藏商户弹框
		hiddenRY() {
			this.StateShowStop = false
		},
		//分页组件->子组件传值
		onChildValue(item) {
			this.pageNum = item[0]
			this.pageSizeNow = item[1]
			this.listShop()
		},
		//隐藏是否创建店铺弹层
		hideCreateShop() {
			this.listShop()
			this.createStopFlag = false
		},
		//跳转到创建店铺弹层
		goCreateShop() {
			const { business_id, business_sn, business_name, name, contact, contact_phone, id } = this.cooperationData
			this.$router.push(
				`/shopUserAdd?business_id=${business_id}&business_sn=${business_sn}&business_name=${business_name}&name=${name}&contact=${contact}&contact_phone=${contact_phone}&id=${id}`
			)
		},
		//确认合作-点击确认
		addMenuBtn(e) {
			const { shop_sn } = this.cooperationData
			let fn = new FormData()
			fn.append('shop_sn', shop_sn) //相关id
			this.$http.post(this.url + '/shop/confirm', fn).then(
				res => {
					//表示无门店经理角色
					if (res.data.code == '209') {
						this.createStopFlag = true
					} else if (res.data.msg == '操作成功!' || res.data.code == '200') {
						this.$message.success(res.data.msg)
						this.listShop()
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)

			//关闭弹框
			this.hiddenRY()
		},
		downloadOrder() {
			//导出订单
			var ruleForm_date1 = ''
			var ruleForm_date2 = ''
			if (this.ruleForm.date1 != '' && this.ruleForm.date2 != '') {
				//开始时间与结束时间必须同时存在
				ruleForm_date1 = this.ruleForm.date1
				ruleForm_date2 = this.ruleForm.date2
			}
			if (this.area_name == '') {
				this.area_id = ''
			}
			let obj = {
				token: JSON.parse(sessionStorage.getItem('manageInfo')).token,
				name: this.shop_name,
				city_id: this.city_id,
				area_id: this.area_id,
				opportunity_status: this.opportunity_status,
				sign_status: this.sign_status,
				business_director: this.business_director,
				add_time_start: ruleForm_date1,
				add_time_end: ruleForm_date2,
				agent_id: this.agent_id
			}
			let param = $.param(obj)
			window.location.href = this.url + '/shop/exportOpportunityList?' + param
		},
		async setValue(arrVal) {
			this.agent_id = arrVal.agent_id
			this.cityList = arrVal.city_list
			this.city_id = this.cityList[0].id
			await this.listArea()
			await this.listShop()
			await this.fetchShopList()
		}
	},
	filters: {}
}
</script>

<style scoped>
.search_box {
	width: 790px;
}
.auditCentent .labels {
	min-height: 100px;
}
.auditCentent .labels .labels_label {
	float: left;
	cursor: pointer;
}
.check_label {
	background: var(--purple4);
	color: #fff;
	border: none;
}
.pdf {
	width: 860px;
	height: 600px;
}
@media (max-width: 767.78px) {
	.titleBox {
		height: 40px;
	}
}

.click_state {
	cursor: pointer;
}

.JobCentent .wrap_top {
	display: flex;
	margin-right: 0px;
}
</style>



// WEBPACK FOOTER //
// src/components/shop/Opportunity.vue